<!--
 * @Author: lei 2677065112@qq.com
 * @Date: 2022-10-03 15:05:26
 * @LastEditors: lei 2677065112@qq.com
 * @LastEditTime: 2022-10-04 11:00:09
 * @FilePath: \vue-admin-template\src\components\SvgIcon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<!-- 字体文件是外部链接用div，非外链用svg标签展示 -->
<!-- svg里user，有同源策略，不能使用外链地址 -->
<!--
  svgIcon组件会在views里使用
  <svg-icon @click="btn" @test="fn"></svg-icon>
  在svgIcon这个组件内，可以用$listeners 接收所有绑定的事件
  $listeners的值：{click：btn，test：fn}
  -->
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <!-- use：使用id标识（对应的svg文件），来描绘此svg标签渲染的图形-->
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>

import { isExternal } from '@/utils/validate'
// template内模板语法：只能用export default里模板配置项数据名，不能直接使用script里定义的普通变量

export default {
  name: 'SvgIcon',
  props: {
    // 字体图标svg文件名
    iconClass: {
      type: String,
      required: true
    },
    // 外部自定义类名（给图标用）
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 是否为外链（是返回true）
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>
